<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Animation example -- double underscore</title>
    <link rel="stylesheet" type="text/css" href="../example.css" />
  </head>
<body>
<div id="doc4">
  <div class="hd">
    <div class="logo" style="float:left;"><a href="http://code.google.com/p/double-underscore/" target="_blank"><img src="http://stauren.net/misc/images/bullhead.gif" /></a></div>
    <div class="hd-title">Module Animation example</div>
    <div>
      <a href="http://code.google.com/p/double-underscore/">Project home</a>&nbsp;
      <a href="http://code.google.com/p/double-underscore/w/list">More docs </a>
    </div>
  </div>

  <div class="hd">
    <h1>Example 1:Simple animation</h1>
  <div id="animTest" style="position:relative;background:#ab3;width:150px;height:150px;line-height:120px;text-align:center;">click 'go' to start</div>
  <button id="go">go</button><button id="stop">stop</button><br><br>
    <h1>Code</h1>
<pre>
    var anim = new __.Anim(anim, 'top', {
      to : -200,
      unit : 'px',
      onOver : function(){
      }
    });

    anim.run();
</pre>
    <h1>Complete Code</h1>
<pre>
&lt;script src="http://double-underscore.googlecode.com/svn/trunk/src/loader/loader.js"&gt;&lt;/script&gt;
//NOTICE: loader.js in trunk is not stable, should always use the newest loader in pkgs
&lt;script&gt;
__.load('core anim', function() {
  var anim = 'animTest', current,
    goUp = new __.Anim(anim, 'top', { to : -200, unit : 'px', onOver : function(){
      current = goRight;
      current.run();
    }}),
    goRight = new __.Anim(anim, 'left', { to : 400, unit : 'px', onOver : function(){
      current = goDown;
      current.run();
    }}),
    goDown = new __.Anim(anim, 'top', { to : 0, unit : 'px', onOver : function(){
      current = goLeft;
      current.run();
    }}),
    goLeft = new __.Anim(anim, 'left', { to : 0, unit : 'px', onOver : function(){
      current = goUp;
      current.run();
    }});

  __.on('go', 'click', function() {
    if (current) {
      current.run();
    } else {
      current = goUp;
      goUp.run();
    }
  });
  __.on('stop', 'click', function() {
    current.pause();
  });
&lt;/script&gt;
</pre>
    <h1>Example2:Drag and animation</h1>
    <div id="drageTest" style="position:relative;background:#b3a;cursor:move;width:100px;height:100px;line-height:80px;text-align:center;">drag me</div>
    <h1>Code</h1>
<pre>
  __.Drag.bind('drageTest', true, {
    t : 300, r : 300, b : 0, l :0
  }, function(left, top, zone) {
    (new __.Anim('drageTest', 'top', { to : 0, unit : 'px', onOver : function(){
      (new __.Anim('drageTest', 'left', { to : 0, unit : 'px'})).run();
    }})).run();
  });
</pre>
  </div>
</div>
<script src="../example.js"></script>
<script src="http://double-underscore.googlecode.com/svn/trunk/src/loader/loader.js"></script>
<script>

__.load('core anim', function() {

  __.Drag.bind('drageTest', true, {
    t : 300, r : 300, b : 0, l :0
  }, function(left, top, zone) {
    (new __.Anim('drageTest', 'top', { to : 0, unit : 'px', onOver : function(){
      (new __.Anim('drageTest', 'left', { to : 0, unit : 'px'})).run();
    }})).run();
  });

  (function() {
    var anim = 'animTest', current,
      goUp = new __.Anim(anim, 'top', { to : -200, unit : 'px', onOver : function(){
        current = goRight;
        current.run();
      }}),
      goRight = new __.Anim(anim, 'left', { to : 400, unit : 'px', onOver : function(){
        current = goDown;
        current.run();
      }}),
      goDown = new __.Anim(anim, 'top', { to : 0, unit : 'px', onOver : function(){
        current = goLeft;
        current.run();
      }}),
      goLeft = new __.Anim(anim, 'left', { to : 0, unit : 'px', onOver : function(){
        current = goUp;
        current.run();
      }});

    __.on('go', 'click', function() {
      if (current) {
        current.run();
      } else {
        current = goUp;
        goUp.run();
      }
    });
    __.on('stop', 'click', function() {
      current.pause();
    });
  }());
});
</script>
</body>
</html>
